<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">分享至</text>
			<!-- <view slot='right-slot' class="center-slot">
				<image @tap="$navto('/pages/mine/setting/setting')" class="center-slot" src="/static/images/my_setting.svg" mode=""></image>
			</view> -->
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="canvas-box">
			<canvas canvas-id="myCanvas" id='myCanvas' style="width: 933px; height: 1674px;"></canvas>
		</view>

		<view class="invite-poster">
			<image v-if="base64" class="canvas-img" :src="base64" mode=""></image>
			<view class="button-box justify-start " v-if="base64">
				<view class="copy-box flex-col align-center" @tap="myCopy">
					<image class="link-icon" src="/static/images/mine/copylink.svg" mode=""></image>
					复制链接
				</view>
				<view class="flex-col align-center" @tap="appSave">
					<image class="link-icon" src="/static/images/mine/download.svg" mode=""></image>
					保存海报
				</view>
				<!-- <image src="/static/images/mine/ava.png" mode=""></image> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				base64: null,
				current: 0,
				moneyShow: false,
				copyword: ''



			}
		},
		onReady() {
			this.getInfo()

		},
		methods: {
			appSave() {
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.base64,
					success: () => {
						uni.showToast({
							title: '保存成功'
						})
					},
					fail: () => {
						uni.showToast({
							title: '保存失败'
						})
					}
				});
				// #endif
				// #ifdef H5 || MP
				this.$refs.uToast.show({
					message: '长按保存图片'
				})
				// #endif

			},
			async getInfo() {
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/poster')
				if (code == 200) {
					// console.log(data, '静态资源');
					this.copyword = data.link
					let avatar = await uni.getImageInfo({
										src: data.avatar,
										// complete(res) {
										// 	console.log(res,dataimg);
										// }
									})
									console.log(avatar,'data.avatar');
									if(avatar[0]!==null){
										this.$refs.uToast.show({
											message: '获取头像失败'
										})
									}else{
										this.getPoster(data,avatar[1].path)
									}
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			getImage(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: function(res) {
							console.log(res, 'res')
							resolve(res.path)
						},
					})
					uni.downloadFile({
						url,
						success: (res) => {
							console.log(res, '图片res');
							if (res.statusCode === 200) {
								resolve(res.tempFilePath)
							}
						}
					});
				})
			},
			urlTobase64(img) {
				return new Promise((resolve, reject) => {
				const downloadTask = 	wx.downloadFile({
						url: img,
						success(res) {
							console.log(res,'下载文件');
									resolve(res.tempFilePath)
						},
						fail(err){
							console.log(err,'err');
						}
					})
					downloadTask.onProgressUpdate((res) => {
					  console.log('下载进度', res.progress)
					  console.log('已经下载的数据长度', res.totalBytesWritten)
					  console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
					})
				})
			},
			async getPoster(info,avatar) {
				uni.showLoading({
					mask: true,
				})
				let w, h
				w = 933; //准确的宽高
				h = 1674
				var ctx = uni.createCanvasContext('myCanvas') //绑定画布

				ctx.drawImage('../../../static/images/mine/share.png', 0, 0, w, h); //填充进图片
				// 头像绘制加圆角
				ctx.save();
				// 这个就是绘制圆形头像
				ctx.beginPath();
				ctx.arc(w / 2, 400 + (w / 10), w / 10, 0, 2 * Math.PI)
				ctx.clip();
				// let avatar = await uni.getImageInfo({ 
				// 					src: info.avatar,
				// 				})
				// 				console.log(avatar,'qrcode');
				// let ava = await this.urlTobase64(info.avatar)
				// console.log(ava,'ava');
				if(avatar){
					ctx.drawImage(avatar, w / 2 - (w / 10), 400, w / 5, w / 5); //填充进图片
				}
				ctx.restore();
				ctx.setFillStyle('#000') //设置内容1的文字样式
				ctx.setFontSize(50);
				ctx.setTextAlign('center') //设置对于坐标点的对齐方式
				ctx.fillText(info.nickname || '', w / 2, h / 3 + 100) //计算距离，将文字定位于图片的某处
				ctx.setFillStyle('#000') //设置内容2的文字样式
				ctx.setFontSize(80);
				ctx.setTextAlign('center') //同上
				ctx.fillText(info.code || '', w / 2, h / 3 + 200)
				console.log(info.avatar, info.nickname, info.code);
				let x = w / 2 - 80, //80为w1的一半
					y = h / 3 + 280 - 40,
					r = 30,
					w1 = 160,
					h1 = 60
				ctx.beginPath();
				ctx.moveTo(x + r, y);
				ctx.arcTo(x + w1, y, x + w1, y + h1, r);
				ctx.arcTo(x + w1, y + h1, x, y + h1, r);
				ctx.arcTo(x, y + h1, x, y, r);
				ctx.arcTo(x, y, x + w1, y, r);
				ctx.fillStyle = '#FFF'
				ctx.closePath();
				ctx.fill()
				ctx.setFillStyle('#000') //设置内容3的文字样式
				ctx.setFontSize(30);
				ctx.setTextAlign('center') //同上
				ctx.fillText('邀请码', w / 2, h / 3 + 280)
				// 加个二维码
				// let img = await this.getImage(info.qrcode)
				// console.log(img,'img');
				// ctx.drawImage('../../../static/images/mine/ava.png', w / 2 - (w / 4.6), 920, w / 2.3, w / 2.3); //填充进图片
				// await this.urlTobase64(info.qrcode)
				let qrcode = await uni.getImageInfo({
									src: info.qrcode,
								})
								console.log(qrcode,'qrcode');
				ctx.drawImage(qrcode[1].path, w / 2 - (w / 4.6), 920, w / 2.3, w / 2.3); //填充进图片
				//二维码

				ctx.draw(); //输出到画布中

				setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							console.log(res, 'res11111111111111111111111111111111111111');
							this.base64 = res.tempFilePath
							uni.hideLoading();
						}
					})
				}, 1200)
			},
			myCopy() {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: this.copyword, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		min-height: 100vh;
		background: linear-gradient(180deg, #152435 0%, #16161E 100%);
		padding: 0 32rpx 60rpx;

		.canvas-box {
			position: fixed;
			top: -1000%;
			opacity: 0;
		}

		.center-slot {
			color: #FFF;
		}

		.right-slot {
			font-size: 26rpx;
			color: #FFF;
		}

		.invite-poster {
			padding: 54rpx 64rpx;

			.canvas-img {
				width: 622rpx;
				height: 1116rpx;
			}

			.button-box {
				color: #FFFFFF66;
				font-size: 24rpx;
				padding: 74rpx 0 18rpx;

				.copy-box {
					margin-right: 60rpx;
				}

				.link-icon {
					width: 90rpx;
					height: 90rpx;
					margin-bottom: 20rpx;
				}
			}
		}

	}
</style>